<template>
  <div class="followup-box inner-content">
    <div class="inner inner-content-box">
      <div class="searchBox">
        <el-form
          :inline="true"
          :model="searchForm"
          size="small"
          style="width: 100%"
        >
          <el-form-item label="状态">
            <el-select v-model="ifPermission" placeholder="请选择" :clearable="true" style='width: 120px'>
              <el-option
                v-for="item in ifPermissionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getList"
              size="small"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button @click="searchReset" size="small" icon="el-icon-delete"
              >清空</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="detailsBox">
        <ag-grid-vue
          class="ag-theme-alpine ag-theme-quartz"
          :gridOptions="gridOptions"
          :localeText="localeText"
          :rowHeight="38"
          :headerHeight="42"
          @grid-ready="onGridReady"
          @selection-changed="getSelectedRows"
          @sort-changed="onSortChangedAggrid"
          @filter-changed="onFilterChangedAggrid"
          :isRowSelectable="isRowSelectable"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :rowData="rowData"
          rowSelection="multiple"
          :rowMultiSelectWithClick="true"
          :enableRangeSelection="true"
        >
        </ag-grid-vue>
      </div>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="审核通过"
      :visible.sync="passVisible"
      width="400px"
      :before-close="passClose">
      <div style="padding: 20px 40px;font-size: 16px;display: flex;align-items: center;">
        <span class="icon iconfont icon--_dakai-15" style="font-size: 24px !important;color: #00b99e;padding-right: 10px;"></span>
        请确认是否通过该审核？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passVisible = false" :loading='btnLoading'>取 消</el-button>
        <el-button type="primary" @click="passConfirmHandle" :loading='btnLoading'>确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="审核驳回"
      :visible.sync="nopassVisible"
      width="500px"
      :before-close="nopassClose">
      <div style="padding: 20px 40px 20px 130px;font-size: 16px;display: flex;align-items: center;">
        <span class="icon iconfont icon--_tuichu-16" style="font-size: 24px !important;color: #d50000;padding-right: 10px;"></span>
        请确认是否驳回该审核？
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="驳回原因" prop="permissionText">
          <el-input v-model="ruleForm.permissionText" type="textarea" :rows="6" placeholder="驳回原因" maxlength="400" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nopassVisible = false" :loading='btnLoading'>取 消</el-button>
        <el-button type="primary" @click="nopassConfirmHandle" :loading='btnLoading'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import Vue from 'vue'
import listBtn from '@/views/modules/examTest/auditExamTest/listBtn.vue'
import state from '@/views/modules/examTest/auditExamTest/state.vue'
import listJson from '@/views/modules/examTest/auditExamTest/list.json'
import { recordsstudentexamination, recordsstudentexaminationPermission } from '@/api/examTest.js'
export default {
  beforeMount () {
    this.gridOptions = {
      // 通过这个属性建立了上下文引用
      context: { componentParent: this }
      // 说人话就是可以在自己声明的组件里调用到父组件的方法和属性了
    }
  },
  components: {
    listBtn,
    state
  },
  data () {
    return {
      user: this.$store.state.user,
      dataSelect: [],
      gridOptions: null,
      localeText: this.$AG_GRID_LOCALE_ZZZ,
      col: [],
      page: {
        pageSizes: [100, 2000, 5000],
        currentPage: 1,
        total: 0,
        pageSize: 100
      },
      searchForm: {
        recordsName: ''
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      isRowSelectable: null,
      rowIndexArr: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 80,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        },
        {
          field: 'handle',
          headerName: '操作',
          width: 120,
          pinned: 'right',
          cellRenderer: 'listBtn'
        }
      ],
      columnDefs: [ ],
      gridApi: null,
      rowData: [],
      msg: null,
      passVisible: false,
      btnLoading: false,
      examInfo: {},
      nopassVisible: false,
      ruleForm: {
        permissionText: ''
      },
      rules: {
        permissionText: [
          { required: true, message: '请填写驳回原因', trigger: 'change' }
        ]
      },
      ifPermissionOptions: [
        {
          label: '待审核',
          value: '0'
        },
        {
          label: '审核通过',
          value: '1'
        },
        {
          label: '审核驳回',
          value: '2'
        }
      ],
      ifPermission: '0'
    }
  },
  watch: {
  },
  created () {
    this.getHeadersCol()
    this.getList()
    console.log('user', this.user)
  },
  methods: {
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    // 获取选中
    getSelectedRows () {
      this.dataSelect = this.gridApi.getSelectedRows()
    },
    // 获取表头
    getHeadersCol () {
      this.columnDefs = []
      setTimeout(() => {
        this.col = JSON.parse(JSON.stringify(listJson.column))
        this.columnDefs = this.rowIndexArr.concat(this.col)
      }, 10)
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    getList () {
      let params = {
        teacherUserId: this.user.id,
        limit: this.page.pageSize,
        page: this.page.currentPage,
        ifPermission: this.ifPermission,
        orderSql: 'creat_date desc'
      }
      recordsstudentexamination(params).then(res => {
        this.rowData = res.data.page.records
        this.rowData.map(v => {
          v.examStatusName = String(v.examStatus) === '0' ? '待考试' : String(v.examStatus) === '1' ? '已结束' : '暂无'
        })
        this.page.total = res.data.page.total
        this.dataSelect = []
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    // 清空搜索
    searchReset () {
      this.searchForm = {}
      this.page.currentPage = 1
      // this.getList();
    },
    // 审核通过 start
    passHandle (val) {
      this.passVisible = true
      this.examInfo = JSON.parse(JSON.stringify(val))
    },
    passConfirmHandle () {
      this.btnLoading = true
      // this.passVisible = false
      let params = {
        id: this.examInfo.id,
        ifPermission: '1'
      }
      recordsstudentexaminationPermission(params).then(res => {
        this.btnLoading = false
        this.passVisible = false
        this.$message.success('操作成功')
        this.getList()
        console.log(res)
      }).catch(err => {
        this.btnLoading = false
        this.passVisible = false
        console.log(err)
      })
    },
    passClose () {
      this.passVisible = false
    },
    // 审核通过 end
    nopassHandle (val) {
      this.examInfo = JSON.parse(JSON.stringify(val))
      this.nopassVisible = true
      setTimeout(() => {
        this.resetForm()
      }, 100)
    },
    nopassClose () {
      this.nopassVisible = false
    },
    nopassConfirmHandle () {
      this.nopassVisible = false
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            id: this.examInfo.id,
            ifPermission: '2',
            permissionText: this.ruleForm.permissionText
          }
          recordsstudentexaminationPermission(params).then(res => {
            this.btnLoading = false
            this.nopassVisible = false
            this.$message.success('操作成功')
            this.getList()
            console.log(res)
          }).catch(err => {
            this.btnLoading = false
            this.nopassVisible = false
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>